﻿@page "/tree-view"
@inject IStringLocalizer<TreeViews> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<h3>@Localizer["TreeViewsTitle"]</h3>
<h4>@Localizer["TreeViewsDescription"]</h4>

<Tips class="mt-3">
    <div class="mb-3"><code>Tree</code> @((MarkupString)Localizer["TreeViewsTips1"].Value) <code>TItem="TreeFoo"</code></div>
    <ul class="ul-demo mb-0">
        <li>@((MarkupString)Localizer["TreeViewsTips2"].Value)</li>
        <li>@((MarkupString)Localizer["TreeViewsTips3"].Value)</li>
        <li>@((MarkupString)Localizer["TreeViewsTips4"].Value)</li>
        <li>@((MarkupString)Localizer["TreeViewsTips5"].Value)</li>
        <li>@((MarkupString)Localizer["TreeViewsTips6"].Value)</li>
        <li>@((MarkupString)Localizer["TreeViewsTips7"].Value)</li>
        <li>@((MarkupString)Localizer["TreeViewsTips8"].Value)</li>
    </ul>
</Tips>

<p>@((MarkupString)Localizer["TreeViewsTips9"].Value)</p>
<p>@((MarkupString)Localizer["TreeViewsTips10"].Value)</p>
<p>@((MarkupString)Localizer["TreeViewsTips11"].Value)</p>
<p>@((MarkupString)Localizer["TreeViewsTips12"].Value)</p>

<DemoBlock Title="@Localizer["TreeViewNormalTitle"]"
           Introduction="@Localizer["TreeViewNormalIntro"]"
           Name="Normal">
    <section ignore>@((MarkupString)Localizer["TreeViewNormalDescription"].Value)</section>
    <TreeView TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick" />
    <ConsoleLogger @ref="Logger1" />
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewCheckboxTitle"]"
           Introduction="@Localizer["TreeViewCheckboxIntro"]"
           Name="Checkbox">
    <section ignore>
        <div>@((MarkupString)Localizer["TreeViewCheckboxTips1"].Value)</div>
        <div>@((MarkupString)Localizer["TreeViewCheckboxTips2"].Value)</div>
    </section>
    <section ignore class="row form-inline">
        <div class="col-12 col-lg-auto">
            <RadioList IsButton="true" @bind-Value="@IsReset" Items="@ResetItems" Color="Color.Success" ShowLabel="true" DisplayText="@Localizer["TreeViewNormalRadioListDisplayText"]"></RadioList>
        </div>
        <div class="col-12 col-lg-auto">
            <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText1"]" ShowAfterLabel="true" @bind-Value="@AutoCheckChildren"></Checkbox>
            <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText2"]" ShowAfterLabel="true" @bind-Value="@AutoCheckParent" class="ms-3"></Checkbox>
        </div>
        <div class="col-12 col-lg-auto">
            <Button Text="@Localizer["TreeViewCheckboxButtonText"]" OnClick="@OnRefresh"></Button>
        </div>
    </section>
    <TreeView TItem="TreeFoo" Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" IsReset="@IsReset" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"></TreeView>
    <ConsoleLogger @ref="Logger2"></ConsoleLogger>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeDisableTitle"]"
           Introduction="@Localizer["TreeViewTreeDisableIntro"]"
           Name="TreeDisable">
    <section ignore>@((MarkupString)Localizer["TreeViewTreeDisableDescription"].Value)</section>
    <div class="col-12 col-lg-auto">
        <Checkbox DisplayText="@Localizer["TreeViewsDisableWholeTreeView"]" ShowAfterLabel="true" @bind-Value="@IsDisabled"></Checkbox>
        <Checkbox DisplayText="@Localizer["TreeViewsWhetherToExpandWhenDisable"]" ShowAfterLabel="true" @bind-Value="@DisableCanExpand" class="ms-3"></Checkbox>
    </div>
    <TreeView TItem="TreeFoo" Items="@DisabledItems" ShowCheckbox="true" IsDisabled="@IsDisabled" CanExpandWhenDisabled="@DisableCanExpand"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewAccordionModelTitle"]"
           Introduction="@Localizer["TreeViewAccordionModelIntro"]"
           Name="AccordionModel">
    <section ignore>@((MarkupString)Localizer["TreeViewAccordionModelDescription"].Value)</section>
    <TreeView TItem="TreeFoo" Items="@GetAccordionItems()" OnExpandNodeAsync="OnExpandNodeAsync" ShowCheckbox="true" IsAccordion="true"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewDefaultExpandTitle"]"
           Introduction="@Localizer["TreeViewDefaultExpandIntro"]"
           Name="DefaultExpand">
    <section ignore>
        @((MarkupString)Localizer["TreeViewDefaultExpandDescription"].Value)
    </section>
    <TreeView TItem="TreeFoo" Items="@ExpandItems" ShowCheckbox="true"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeDisplayIconTitle"]"
           Introduction="@Localizer["TreeViewTreeDisplayIconIntro"]"
           Name="TreeDisplayIcon">
    <section ignore>
        @((MarkupString)Localizer["TreeViewTreeDisplayIconDescription"].Value)
    </section>
    <TreeView TItem="TreeFoo" Items="@GetIconItems()" ShowIcon="true" ShowCheckbox="true"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeClickExpandTitle"]"
           Introduction="@Localizer["TreeViewTreeClickExpandIntro"]"
           Name="TreeClickExpand">
    <section ignore>
        @((MarkupString)Localizer["TreeViewTreeClickExpandDescription"].Value)
    </section>
    <TreeView TItem="TreeFoo" Items="@GetClickExpandItems" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeValidationFormTitle"]"
           Introduction="@Localizer["TreeViewTreeValidationFormIntro"]"
           Name="TreeValidationForm">
    <section ignore>@((MarkupString)Localizer["TreeViewTreeValidationFormDescription"].Value)</section>
    <ValidateForm Model="@Model">
        <TreeView TItem="TreeFoo" Items="@GetFormItems" OnTreeItemClick="@OnFormTreeItemClick" ShowCheckbox="true"></TreeView>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeLazyLoadingTitle"]"
           Introduction="@Localizer["TreeViewTreeLazyLoadingIntro"]"
           Name="TreeLazyLoading">
    <section ignore>
        @((MarkupString)Localizer["TreeViewTreeLazyLoadingDescription"].Value)
    </section>
    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="@GetLazyItems()" OnExpandNodeAsync="OnExpandNodeAsync"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeCustomNodeTitle"]"
           Introduction="@Localizer["TreeViewTreeCustomNodeIntro"]"
           Name="TreeCustomNode">
    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="GetTemplateItems()"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewTreeNodeColorTitle"]"
           Introduction="@Localizer["TreeViewTreeNodeColorIntro"]"
           Name="TreeNodeColor">
    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="GetColorItems()"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewCheckedItemsTitle"]"
           Introduction="@Localizer["TreeViewCheckedItemsIntro"]"
           Name="CheckedItems">
    <TreeView TItem="TreeFoo" ShowCheckbox="true" Items="@CheckedItems2" OnTreeItemChecked="@OnTreeItemChecked2"></TreeView>
    <ConsoleLogger @ref="Logger3"></ConsoleLogger>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewCustomCheckedItemsTitle"]"
           Introduction="@Localizer["TreeViewCustomCheckedItemsIntro"]"
           Name="CustomCheckedItems">
    <section ignore>
        <div>@((MarkupString)Localizer["TreeViewCustomCheckedItemsTips1"].Value)</div>
    </section>
    <section ignore class="row form-inline">
        <div class="col-12 col-lg-auto">
            <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText1"]" ShowAfterLabel="true" @bind-Value="@AutoCheckChildren"></Checkbox>
            <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText2"]" ShowAfterLabel="true" @bind-Value="@AutoCheckParent" class="ms-3"></Checkbox>
        </div>
    </section>
    <TreeView TItem="TreeFoo" ShowCheckbox="true" ClickToggleNode="true" ClickToggleCheck="false" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"
              Items="@GetCustomCheckedItems()" OnExpandNodeAsync="CustomCheckedNodeOnExpandNodeAsync"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewSetActiveTitle"]"
           Introduction="@Localizer["TreeViewSetActiveIntro"]"
           Name="SetActive">
    <section ignore class="row form-inline">
        <div class="col-12 col-lg-auto">
            <Select TValue="string" Items="SelectedItems" OnSelectedItemChanged="SelectedItemOnChanged" ShowLabel="true" DisplayText="@Localizer["TreeViewSetActiveDisplayText"]"></Select>
        </div>
    </section>
    <TreeView @ref="SetActiveTreeView" TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewShowSkeletonTitle"]"
           Introduction="@Localizer["TreeViewShowSkeletonIntro"]"
           Name="ShowSkeleton">
    <Button Text="@Localizer["TreeViewShowSkeletonButtonText"]" IsAsync="true" Icon="fa-solid fa-font-awesome" OnClick="@OnLoadAsyncItems"></Button>
    <TreeView TItem="TreeFoo" Items="@AsyncItems" ShowSkeleton="true" OnExpandNodeAsync="OnExpandNodeAsync" class="mt-3"></TreeView>
</DemoBlock>

<DemoBlock Title="@Localizer["TreeViewShowSearchTitle"]"
           Introduction="@Localizer["TreeViewShowSearchIntro"]"
           Name="ShowSearch">
    <TreeView TItem="TreeFoo" Items="@SearchItems" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
</DemoBlock>

<AttributeTable Items="@GetAttributes()"></AttributeTable>

<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>
